<template>
    <div class="main">
     <el-container>
         <!-- 左侧信息栏 -->
        <el-aside width="200px">
            <!-- 顶级盒子 -->
            <el-menu :unique-opened="true" :router="true" :default-openeds="defaultOpeneds" :default-active="defalutActive">
                <!-- 1 -->
                <el-menu-item   enu-item index="/settings">
                    <i class="el-icon-setting"></i>
                    <span slot="title">全局设置</span>
                </el-menu-item>
                <!-- 2 -->
                <el-submenu index="table">
                    <template slot="title">
                        <i class="el-icon-monitor"></i>
                        <span>桌台管理</span>
                    </template>
                    <!-- 2号分组 -->
                    <el-menu-item-group>
                        <el-menu-item index="/table/list">桌台列表</el-menu-item>
                        <el-menu-item index="/table/add">添加桌台</el-menu-item>
                        <el-menu-item index="/table/delete">删除桌台</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <!-- 3 -->
                  <el-menu-item   enu-item index="/category/list">
                    <i class="el-icon-tableware"></i>
                    <span slot="title">菜品类别</span>
                </el-menu-item>
                <!-- 4 -->
                <el-submenu index="dish">
                    <template slot="title">
                        <i class="el-icon-food"></i>
                        <span>菜品管理</span>
                    </template>
                    <!-- 4号分组 -->
                    <el-menu-item-group>
                        <el-menu-item index="/dish/list">所有菜品</el-menu-item>
                        <el-menu-item index="/dish/add">添加菜品</el-menu-item>
                        <el-menu-item index="/dish/delete">删除菜品</el-menu-item>
                        <el-menu-item index="/dish/update">修改菜品</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <!-- 5 -->
                  <el-menu-item   enu-item index="/order/list">
                    <i class="el-icon-shopping-cart-full"></i>
                    <span slot="title">订单管理</span>
                </el-menu-item>
                   <!-- 6 -->
                  <el-menu-item   enu-item index="/security">
                    <i class="el-icon-warning-outline"></i>
                    <span slot="title">安全管理</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
            <!-- 顶部信息栏 -->
            <el-header height="60px" >
                <main-header></main-header>
            </el-header>
            <!-- 主体部分 -->
            <el-main>
                <!-- 路由嵌套子路由位置 -->
                <router-view></router-view>
            </el-main> 
        </el-container>
    </el-container>
    </div>
</template>

<script>
//引用子组件
import MainHeader from '../components/MainHeader'
export default {
    data(){
        return{

        }
    },
    //计算属性 = 模型属性+操作方法
    computed:{
        defaultOpeneds(){ 
            //当前路由地址 用户打开哪个路由下的子路径 就打开对应的父路径 
            let path=this.$route.path;
            if(path.indexOf('/table')==0){
                console.log(path.indexOf('/table'))
                return ['table']
            }else if(path.indexOf('/dish')==0){
                return ['dish']
            }else{
                return [];
            }
        },
        defalutActive(){
            //用户访问哪个路径 就默认选中对应index值的标签
            let path=this.$route.path;
            return path+""
        }
    },
    //创建vue实例前 验证管理员是否登录
    beforeCreate(){
        if(this.$store.state.adminName==""){
            alert('请登录!')
            this.$router.push('/login')
        }else{
            console.log(this.$store.state.adminName)
        }
    },
    //引用子组件MainHeader
    components:{MainHeader}
}
</script>